<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    <style>
        table {
            border-spacing: 4px 0;
            margin-left: -4px;
            margin-bottom: 20px;
        }

        td {
            width: 200px;
            height: 60px;
            border: 1px solid black;
            text-align: center;
        }

        button {
            background-color: red;
            color: white;
            width: 70px;
            height: 30px;
            font-size: 1.1em;
            text-align: center;
        }

        input {
            width: 400px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <main id="app">
        <div v-if='goodsList != 0'>
            <table>
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>操作</td>
                </tr>
                <tr v-for='(product,index) in goodsList'>
                    <td>{{product.goodsName}}</td>
                    <td>{{product.goodsPrice}}</td>
                    <td>
                        <first-com :product='goodsList' @numchange='updatenum' i='index'></first-com>
                    </td>
                    <td>
                        <button @click='remove(index)'>移除</button>
                    </td>
                </tr>
            </table>
        </div>
        <h1 v-else>购物车为空</h1>
        <input type="text" v-model="user">
        <input type="text" v-model="address">

        <div>
            <section>
                <h1 style='font-size: 40px;'>清单</h1>
                <span>
                    商品总价:{{allPrice}}
                    <br> 收件人:{{user}}
                    <br> 收货地址{{address}}
                </span>
            </section>
        </div>
    </main>

    <script id="first" type="text/html">
         <div>
             <button @click='preClick()' :class='{maxOrMin:products[i].num <= 0}'>-</button>
             <span>{{goodsNum}}</span>
             <button @click='nextClick()' :class='{maxOrMin:products[i].num >= 10}'>+</button>
         </div>
    </script>
    <script>
        Vue.component('first-com', {
            template: "#first",
            data: function () {
                return {
                    newgoodsNum: this.mynum
                }
            },
            props: {
                mynum: Number
            },
            methods: {
                preClick: function () {
                    this.$emit('numchange', --this.newgoodsNum)
                },
                nextClick: function () {
                    this.newgoodsNum++
                    this.$emit('numchange', ++this.newgoodsNum)
                }

            }

        })
        var vue = new Vue({
            el: "#app",
            data: {
                user: '',
                address: '',

                goodsList: [
                    {
                        goodsName: "辣条",
                        goodsPrice: "1",
                        goodsNum: 10,

                    }, {
                        goodsName: "泡椒鸡爪",
                        goodsPrice: "1.5",
                        goodsNum: 0,

                    }, {
                        goodsName: "巧克力",
                        goodsPrice: "3",
                        goodsNum: 5,

                    }

                ]

            },
            methods: {
                remove: function (index) {
                    console.log(index)
                    this.goodsList.splice(index, 1)
                },
                updatenum(value) {
                    this.goodsList[value.shop].goodsNum = value.newgoodsNum
                },
            },
            computed: {
                allPrice: function () {
                    var temp = 0
                    for (var i = 0; i < this.goodsList.length; i++) {
                        temp += this.goodsList[i].price * this.goodsList[i].goodsNum
                    }
                    return temp
                }
            }
        })
    </script>
</body>

</html>